import { RepoLink } from '@brillout/docpress'
import { Link } from '@brillout/docpress'

> **What are active links?** It's the practice of visually highlighting the current page in the navigation.
> For example, this page named "Active Links" is highlighted with a gray background in the navigation on the left of this website.
> The link is said to be "active".

To implement active links:
 - Create a new component `<Link>`.
 - `<Link>` uses <Link href="/usePageContext">`usePageContext()`</Link> to access <Link href="/pageContext">`pageContext.urlPathname`</Link>.
 - `<Link>` checks whether `const isActive = href === pageContext.urlPathname` and sets a CSS class accordingly `<a class="is-active">`.

Examples:
 - React: <RepoLink path='/boilerplates/boilerplate-react/renderer/Link.jsx' />
 - Vue: <RepoLink path='/boilerplates/boilerplate-vue/renderer/Link.vue' />

> You cannot use `window.location.pathname` if you use SSR, because it isn't available when the page is rendered on the server-side.
> If you have set <Link href="/ssr">`ssr: false`</Link>, then you can use `window.location.pathname` instead of `pageContext.urlPathname`.
